<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>迈迪防 | 运营商硬件管理</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <% include "../login/header.html" %>
    <% include "../login/left.html" %>
    <div class="layui-body">
        <!-- 内容主体区域 -->

            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
                <legend>运营商硬件管理</legend>
            </fieldset>
            <div style="padding: 10px;">
                <span class="layui-breadcrumb">
                    <a href="/">首页</a>
                    <a>设备管理</a>
                    <a><cite>运营商硬件管理</cite></a>
                </span>
            </div>
        <form class="layui-form" action="">
            <div style="padding: 30px;">
                <div class="layui-inline">
                    <label class="layui-form-label">线路名称:</label>
                    <div class="layui-input-block">
                        <input style="width: 250px" type="text" name="route_name" lay-verify="title" autocomplete="off" placeholder="请输入加速线路"
                               class="layui-input">
                    </div>
                </div>

                <!--<label class="layui-form-label" style="width: 100px" >加速线路名称</label>-->
                    <!--<div class="layui-col-md2">-->
                        <!--<div class="layui-input-inline">-->
                            <!--<input style="width: 300px" type="text" name="route_name" lay-verify="title" autocomplete="off" placeholder="请输入加速线路"-->
                                   <!--class="layui-input">-->
                        <!--</div>-->
                    <!--</div>-->
                    <!--<label class="layui-form-label" style="width: 100px" >运营商</label>-->
                    <!--<div class="layui-col-md2">-->
                        <!--<select id="clc_belong" name="belong_operator" class="layui-input">-->
                            <!--<option value="">请选择</option>-->
                            <!--<option value="0">中国联通</option>-->
                            <!--<option value="1">中国电信</option>-->
                            <!--<option value="0">中国移动</option>-->
                            <!--<option value="0">中国广电</option>-->
                        <!--</select>-->
                    <!--</div>-->

                <div class="layui-inline">
                    <label class="layui-form-label">运营商:</label>
                    <div class="layui-input-block">
                        <select id="clc_belong" name="belong_operator" class="layui-input">
                            <option value="">请选择</option>
                            <option value="0">中国联通</option>
                            <option value="1">中国电信</option>
                            <option value="0">中国移动</option>
                            <option value="0">中国广电</option>
                        </select>
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">状态:</label>
                    <div class="layui-input-block">
                        <select name="enable" class="layui-input">
                            <option value="">请选择</option>
                            <option value="1">启用</option>
                            <option value="0">禁用</option>
                        </select>
                    </div>
                </div>

                    <!--<label class="layui-form-label" style="width: 100px" >状态</label>-->
                    <!--<div class="layui-col-md2">-->
                        <!--<div class="layui-inline">-->
                            <!--<select name="enable" class="layui-input">-->
                                <!--<option value="">请选择</option>-->
                                <!--<option value="1">启用</option>-->
                                <!--<option value="0">禁用</option>-->
                            <!--</select>-->
                        <!--</div>-->
                    <!--</div>-->
                    <div class="layui-inline">
                        <button class="layui-btn" lay-submit lay-filter="find">查询</button>
                    </div>
            </div>
        </form>
        <div style="padding: 20px">

                <div ><a id='add_operator' class="layui-btn">新增</a></div>
                <table class="layui-table" lay-skin="nob" id="demo" lay-filter="test"></table>



        </div>
    </div>

    <div id="add-main" style="display: none; margin: 50px 0px 0px 0px">
        <form class="layui-form" id="add-form">
            <input type="hidden" name="id" value="" id="add-id">
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px">加速线路名称</label>
                <div class="layui-input-block">
                    <input style="width: 400px" type="text" name="route_name" placeholder="请输入加速线路" class="layui-input"
                           >
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px">运营商</label>
                <div class="layui-input-block">
                    <input style="width: 400px" type="text" name="belong_operator" placeholder="请输入运营商" class="layui-input"
                           >
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px">地区</label>
                <div class="layui-input-block">
                    <input style="width: 400px" type="text" name="belong_region" placeholder="请输入地区" class="layui-input"
                           >
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block" style="margin-left: 30%; margin-top: 10%">
                    <button class="layui-btn" lay-submit lay-filter="add-main">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary" id="exit-add">退出</button>
                </div>
            </div>
        </form>
    </div>

    <div id="update-main" style="display: none; margin: 50px 0px 0px 0px">
        <form class="layui-form" id="update-form">
            <input type="hidden" name="id" value="" id="news-id">
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px">加速线路名称</label>
                <div class="layui-input-block">
                    <input style="width: 400px" type="text" name="route_name" placeholder="请输入加速线路" class="layui-input"
                           id='route_name'>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px">运营商</label>
                <div class="layui-input-block">
                    <input style="width: 400px" type="text" name="belong_operator" placeholder="请输入运营商" class="layui-input"
                           id='belong_operator'>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px">地区</label>
                <div class="layui-input-block">
                    <input style="width: 400px" type="text" name="belong_region" placeholder="请输入地区" class="layui-input"
                           id='belong_region'>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block" style="margin-left: 30%; margin-top: 10%">
                    <button class="layui-btn" lay-submit lay-filter="update-main">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary" id="exit-update">退出</button>
                </div>
            </div>
        </form>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © layui.com - 底部固定区域
    </div>
</div>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i
            class="layui-icon layui-icon-edit"></i>编辑</a>
    {{# if(d.enable==0){ }}
    <a class="layui-btn  layui-btn-xs" lay-event="enable"><i
            class="layui-icon layui-icon-delete"></i>启用</a>
    {{# }if(d.enable ==1) { }}
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="enable"><i
            class="layui-icon layui-icon-delete"></i>禁用</a>
    {{# }}}
</script>

<script src="../static/layui/layui.js"></script>
<script src="../static/assets/js/global.js"></script>
<script>
  layui.use(['common'], function () {
    let common = layui.common;
    let form = layui.form,
      $ = layui.jquery,
      table = layui.table,
      layer = layui.layer;


    common.setSelect("/operatorDevice/getBelong", 'clc_belong',true);
    let addConfigData = document.getElementById('add_operator');
    addConfigData.addEventListener('click', function cancel() {
      common.showLayer({title:['新增配置信息', 'font-size:25px;text-align:center'],width:'600px',height: '400px',name:'#add-main'});
    });

    let close_update = document.getElementById('exit-update');
    close_update.addEventListener('click', function cancel() {
      layui.layer.closeAll();
    });
    let close_add = document.getElementById('exit-add');
    close_add.addEventListener('click', function cancel() {
      layui.layer.closeAll();
    });

    table.render({
      elem: '#demo'
      , height: 500
      , url: '/operatorDevice/getOperator/' //数据接口
      , page: true //开启分页
      , title: '应用列表'
      , skin: "line"
      , even: true
      , cols: [[ //表头
        {field: 'route_name', title: '加速线路名称', width: 250}
        , {field: 'belong_operator', title: '所属运营商', cellMinWidth: 400}
        , {field: 'belong_region', title: '所属地区', width: 150}
        , {field: 'date_created', title: '创建时间', cellMinWidth: 250}
        , {field: 'created_by_id', title: '创建人', cellMinWidth: 250}
        , {
          field: 'enable', title: '状态', width: 100, templet: function (d) {
            return d.enable== 0 ? '<span class="layui-badge">禁用</span>' : '<span class="layui-badge layui-bg-green">启用</span>'
          }
        }
        , {fixed: 'right', title: '操作', toolbar: '#barDemo', cellMinWidth: 200}
      ]]
    });

    table.on('tool(test)', (obj) => {
      let data = obj.data;
      $('#news-id')[0].value = data.id;
      $('#route_name')[0].value = data.route_name;
      $('#belong_operator')[0].value = data.belong_operator;
      $('#belong_region')[0].value = data.belong_region;
      if (obj.event === 'edit') {
        common.showLayer({title:['编辑数据', 'font-size:25px;text-align:center'],width:'600px',height: '400px',name:'#update-main'});
      } else if (obj.event === 'enable') {
        let type = data.enable==0?'启用':'禁用';
        let enable = data.enable==0?1:0;
        layer.confirm(`确定要${type}吗？`, function (index, layero) {
          $.ajax({
            url: '/operatorDevice/enabled', method: 'post', data: {id: data.id,enabled:enable}, success: (result) => {
              if (result == 1) {
                table.reload('demo'); //数据刷新
                layer.msg('成功！');
              } else {
                layer.msg('失败！');
              }
              layer.close(index); //关闭弹层
            }
          });
        });
      }
    });

    form.on('submit(find)', function (data) {
      common.find(data,'demo','/operatorDevice/find');
      return false;
    });

    form.on('submit(add-main)', function (data) {
      let params = data.field;
      let msg = {
        url: '/operatorDevice/addOperator',
        data: params
      };

      common.postMsg(msg, (data) => {
        if (data.success) {
          layer.closeAll();
          layer.msg('添加成功');
          table.reload('demo');
        } else {
          layer.msg(`添加失败,${data.msg}`);
        }
      });
      return false;
    });

    form.on('submit(update-main)', function (data) {
      let params = data.field;
      let msg = {
        url: '/operatorDevice/editOperator',
        data: params
      };

      common.postMsg(msg, (data) => {
        if (data.success) {
          layer.closeAll();
          layer.msg('编辑成功');
          common.setSelect("/operatorDevice/getBelong", 'clc_belong',true);
          table.reload('demo');
        } else {
          layer.msg(`编辑失败,${data.msg}`);
        }
      });
      return false;
    });
  });
</script>
</body>
</html>
